import React, { useState, useMemo } from 'react'

function ComA(props) {
  console.log('render a')
  return (
    <div>
      <h1>coma</h1>
      <button onClick = { props.onClick }>加</button> { props.children }
    </div>
  )
}
function ComB(props) {
  console.log('render b')
  return (
    <div>
      <h1>comb</h1>
      <button onClick = { props.onClick }>加</button> { props.b }
    </div>
  )
}
function App() {
  const [ a, setA ] = useState(11)
  const addComa = () => { setA(a + 1) }
  const ComAA = useMemo(() => <ComA onClick = { addComa }>{ a }</ComA>, [a])

  const [ b, setB ] = useState(22)
  const addComb = () => { setB(b + 1) }
  const ComBB = useMemo(() => <ComB onClick = { addComb } b = { b } ></ComB>, [b])
  return (
    <div>
      { ComAA }
      { ComBB }
    </div>
  )
}

export default App
